import React, { Component } from 'react';
import NaveSelection from '../selection/NavSelection';
import './User.css';
import Menu from './componment/Menu';
import { get } from '../../Lib/Http';
import apiUrl from '../../Config/web';
import { Spin } from 'antd';

class User extends Component {

    constructor(props){
        super(props);

        this.state = {
            user:''
        }

    }


    componentDidMount(){
        let that = this;

        let _b_url = that.props.history.location.pathname;
        window._hmt.push(['_trackPageview', _b_url]);

        get(apiUrl.userInfo, {}, function(response){

            let data = response.data;


            if(data.code === 0){
               that.setState({
                   user:data.data
               });

               return;
            }

            if(data.code === 1000){
                that.props.history.push('/login');
                return;
            }


        }, function(error){
            console.log(error);
        });

    }

    render() {

        if(this.state.user === ''){
            return (<Spin tip="Loading..." className="home-loding" size="large" />);
        }

        let user = this.state.user;

        console.log(user);

        let vipColorList = {
            0:'#ffffff',
            1:'#ffb300',
        }

        let color = vipColorList[user.is_vip];
        let viptime = '会员已经到期';

        if(user.is_vip === 1){
            viptime = user.vip_time
        }


        return (
            <div className="root">
                
                <div className="user-head-box">
                    <div className="user-head">
                        <div className="user-head-img">

                            <div className="user-head-img-box">
                                <img src={user.img} alt="头像"  />
                            </div>

                        </div>

                        <div className="user-head-name">
                            <div>{user.username}</div>
                            <div>
                                <i style={{color:color}} className="icon iconfont icon-VIP"></i>
                            </div>
                            <div className="bg-font-size">{viptime}</div>
                            <div className="bg-font-size">余额 {parseInt(user.amount)} 小饼干</div>
                        </div>
                    </div>
                </div>

                <div className="user-content">

                {/*
                    
                    <Menu history={this.props.history} to='/' name="会员特权" iconColor="#ff4900" icon="icon-huiyuan"></Menu>
                */}
                    
                
                    <Menu history={this.props.history} to='/recharge' name="饼干充值" iconColor="#efec69" icon="icon-jinbishangcheng"></Menu>

                    <Menu history={this.props.history} to='/bought' name="我的试卷" iconColor="#77b4b2" icon="icon-kebiao"></Menu>    

                    <Menu history={this.props.history} to='/test/log' name="刷题历史" iconColor="#a3cdcb" icon="icon-qingjia"></Menu>

                    <Menu history={this.props.history} border='1' to='/help' name="使用指南" iconColor="#a3cdcb" icon="icon-bangzhu"></Menu>

                </div>


                <NaveSelection history={this.props.history} action="user"></NaveSelection>
            </div>
        );
    }
}

export default User;